<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <img src="../assets/zjt.png" alt="" class="back" @click="back()"/>
        <div v-show="status != 1">
          <img src="../assets/shoucang.png" alt="" v-show="store===false" @click="storeOn(0)"/>
          <img src="../assets/shoucang_1.png" alt="" v-show="store===true" @click="storeOn(1)" />
          <img src="../assets/jubao.png" alt="" @click="report()" />
          <img src="../assets/fenxiang.png" alt="" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="con-top">
        <div>
          <p>{{company.companyName}}</p>
          <span>{{company.scale}}&nbsp;&nbsp;{{company.industry}}</span>
        </div>
        <div>
          <img :src="company.logo" alt="">
        </div>
      </div>
      <div class="con-title">
        <p>公司地址</p>
        <span>{{company.address}}</span>
        <div class="firm-add">
          <img src="../assets/ditu.jpg" alt="">
        </div>
      </div>
      <div class="con-title1">
          <p>公司职位</p>
          <div class="block" v-for="item in list" @click="goDtl(item)">
            <div class="block-top">
              <span>{{ item.title }}</span>
              <span>{{ item.salaryRange }}</span>
            </div>
            <div class="block-class">
              <span>{{ item.workYearRange }}</span>
              <span>{{ item.eduBgdRange }}</span>
            </div>
            <div class="block-btn">
              <span>{{ item.companyName }}</span>
              <span>{{ item.regionName }}</span>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox, Toast } from 'mint-ui'
import Vue from 'vue'
export default {
  inject: ['reload'],
  name: 'firm',
  components: {MessageBox, Toast },
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.init(this.companyId)

    let companyDetall = JSON.parse(localStorage.getItem('globel_company_detail'));
    this.company = companyDetall;
    let companyUserDeatil = JSON.parse(localStorage.getItem('globel_company_user_detail'));
  },
  mounted () {
    // 获取跳转路径
    if (this.$route.params.jumpPath) {
      this.jumpPath = this.$route.params.jumpPath;
    }

    let that = this;
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    this.$http({
      method: 'get',
      url: Vue.prototype.AppURL + '/comuser/get/company/detail?id=' + this.company.id,
      data: {id: this.company.id}
    }).then(({ data }) => {
      console.log("=======", data)
      if (data.logo) {
        that.company.logo = Vue.prototype.AppURL + '/file/' + data.logo
      }
    })

    //查询此职位是否收藏
    let userId = localStorage.getItem("userId");
    this.$http({
      method: "get",
      url: Vue.prototype.AppURL +  '/index/query/collect',
      params: {
        resumeId: this.company.id,
        type: 2,
        userId: userId,
      }
    }).then(({data}) => {
      if (data.data) {
        this.store = true;
      } else {
        this.store = false;
      }
    })
  },
  // data() 为变量赋值等
  data () {
    return {
      status: localStorage.status,
      companyId: this.$route.params.companyId,
      company: [],
      list: [
        {
          job: 'java开发',
          company: '大连华企智源有限公司',
          pay: '3-5K',
          city: '大连市',
          rqstd: [{ name: '1-3年' }, { name: '本科' }, { name: '技能' }]
        },
        {
          job: 'java开发',
          company: '大连华企智源有限公司',
          pay: '3-5K',
          city: '大连市',
          rqstd: [{ name: '1-3年' }, { name: '本科' }, { name: '技能' }]
        }
      ],
      store: false,
      recruitId: localStorage.getItem("globel_recruitId")
    }
  },
  // methods 编写js函数
  methods: {
	  // 个人收藏公司
	  collect () {
      let userId = localStorage.getItem("userId");
      this.$http({
        method: "get",
        url: Vue.prototype.AppURL +  '/index/save/collect',
        params: {
          resumeId: this.company.id,
          type: 2,
          userId: userId,
        }
      }).then(({data}) => {
        if (data.data) {
          Toast('收藏成功')
        } else {
          Toast('收藏失败')
        }
      })
	  },
	  // 个人取消收藏公司
	  cancelCollect () {
      let userId = localStorage.getItem("userId");
      this.$http({
        method: "get",
        url: Vue.prototype.AppURL +  '/index/un/collect',
        params: {
          resumeId: this.company.id,
          type: 2,
          userId: userId,
        }
      }).then(({data}) => {
        if (data.data) {
          Toast('取消收藏成功')
        } else {
          Toast('取消收藏失败')
        }
      })
	  },
    init (id) {
      console.log(id, "-------------")
      this.$http({
        methods: 'get',
        url: Vue.prototype.AppURL + '/index/company/recruit?companyId=' + id
      }).then(({data}) => {
        console.log(data)
        //this.company = data.ycCompany
        this.list = data.recruits
      })
    },
    back () {
      if (this.jumpPath) {
        this.$router.go(-1)
      } else {
        this.$router.push({name: 'usersPost'});
      }
    },
    goDtl (item) {
      localStorage.setItem('globel_recruitId', item.id);
      localStorage.setItem('globel_data', JSON.stringify(item));
      this.$router.push({name: 'usersPost', params: {recruitId: item.id, data: item}})
    },
    storeOn (i) {
      if (i == 0) {
        this.store = true
        // 个人收藏表添数据
        this.collect()
      } else if (i == 1) {
        MessageBox.confirm('确定要取消收藏该公司吗?').then(action => {
          this.store = false
          // 个人收藏表删除数据
          this.cancelCollect()
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    report () {
      let userId = localStorage.getItem("userId");
      this.$http({
        method: "get",
        url: Vue.prototype.AppURL +  '/index/query/complaint',
        params: {
          companyId: this.company.id,
          userId: userId,
        }
      }).then(({data}) => {
        if (data.data) {
          Toast('您已经举报过该公司了')
        } else {
          MessageBox.confirm('确定要举报该公司吗?', {showInput: true}).then((action) => {
            this.$http({
              method: "get",
              url: Vue.prototype.AppURL +  '/index/save/complaint',
              params: {
                companyId: this.company.id,
                content: action.value,
                userId: userId,
              }
            }).then(({data}) => {
              if (data.data) {
                Toast('举报成功')
              } else {
                Toast('举报失败')
              }
            })
          }).catch((err) => {
            console.log(err)
          })
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}
.head-fixed {
  width: 100%;
  height: 84px;
  position: fixed;
  z-index: 999;
}
.head {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  background: #fff;
  justify-content: space-between;
  /* border-bottom: 1px solid #dfdfdf; */
  /* box-shadow: 2px 2px 5px  #c7c7c7; */
}
.head div {
  display: flex;
  width: 30%;
  justify-content: space-between;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.content {
  position: relative;
  top: 40px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px 40px 10px;
}
.con-top {
  box-sizing: border-box;
  padding: 10px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfdfdf;
}
.con-top img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}
.con-title1 p{
  font-size: 12px;
  padding-top: 10px;
  font-weight: 900;
}
.con-top p {
  font-size: 20px;
  font-weight: 900;
}
.con-top span {
  font-size: 12px;
}
.con-title {
  padding: 10px 0;
}
.con-title p {
  font-size: 12px;
  font-weight: 900;
}
.con-title span {
  font-size: 12px;
  display: inline-block;
  padding-bottom: 20px;
}
.con-title{border-bottom: 1px solid #dfdfdf;}
.block {
  width:100%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
}
.block .block-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.block-top span:first-child {
  color: #333;
  font-weight: 700;
}
.block-top span:last-child {
  color: #3e63a8;
}
.block-calss {
  width: 100%;
}
.block-class span {
  background: #f0f0f0;
  color: #757575;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 10px;
}
.block-company {
  font-size: 12px;
  color: #757575;
}
.block-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #757575;
}

.firm-add{
  width: 100%;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
}
.firm-add img{
  width: 100%;
  height: 100%;
}
</style>
